<template>
    <div class="box">
        <div class="footer banner1">
            <div class="footer-l">
                <ul class="footer-ul tanxin">
                    <li><a href="">服务条款</a></li>
                    <li><a href="">隐私政策</a></li>
                    <li><a href="">儿童隐私政策</a></li>
                    <li><a href="">版权投诉</a></li>
                    <li><a href="">投资者关系</a></li>
                    <li><a href="">广告合作</a></li>
                    <li><a href="">廉正举报</a></li>
                    <li><a href="">联系我们</a></li>
                </ul>
                <p>
                    <span>网易公司版权所有©1997-2022</span>
                    <span>杭州乐读科技有限公司运营：
                        <a href="javascript:;">浙网文[2021] 1186-054号</a>
                    </span>
                </p>
                <p>
                    <span>
                        <a href="javascript:;">粤B2-20090191-18 工业和信息化部备案管理系统网站</a>
                    </span>
                    <span>
                        <a href="javascript:;">浙公网安备 33010902002564号</a>
                    </span>
                </p>
                <p>
                    <span>互联网宗教信息服务许可证：浙（2022）0000120</span>
                    <span>监督举报邮箱：51jubao@service.netease.com</span>
                </p>
            </div>
            <div class="footer-r">
                <ul class="tanxin">
                    <li>
                        <a href=""></a>
                        <p class="">Amped Studio</p>
                    </li>
                    <li>
                        <a href=""></a>
                        <p class="">用户认证</p>
                    </li>
                    <li>
                        <a href=""></a>
                        <p class="">独立音乐人</p>
                    </li>
                    <li>
                        <a href=""></a>
                        <p class="">赞赏</p>
                    </li>
                    <li>
                        <a href=""></a>
                        <p class="">视频奖励</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {

 
        }
    }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.box{
    background-color: #f4f4f4;
    border-top: 1px solid #ccc;
    .footer {
        height: 175px;
        display: flex;
        justify-content: space-between;
        .footer-l{
            width: 55%;
            height: 100%;
            padding-top: 20px;
            box-sizing: border-box;
            .footer-ul{
                font-size: 13px;
                padding-bottom: 10px;
                li{
                    padding: 0 7px;
                    border-right: 1px solid gray;
                    color: gray;
                    font-size: 12px;
                    a{
                        text-decoration: none;
                        color: #ccc;
                    }
                }
                li:first-child{
                    padding-left: 0;
                }
                li:last-child{
                    border: none;
                }
            }
            p{
                font-size: 12px;
                padding: 10px 0;
                span{
                    padding-right: 20px;
                    color: gray;
                    a{
                        color: gray;
                        text-decoration: none;
                    }
                    a:hover{
                        text-decoration: underline;
                    }
                }
                span:last-child{
                    padding-right: 0;
                }
            }
        }
        .footer-r{
            width: 45%;
            height: 100%;
            padding-top: 20px;
            box-sizing: border-box;
            justify-content: space-between;
            li {
                width: 20%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                a {
                    display: inline-block;
                    width: 50px;
                    height: 45px;
                    background-color: pink;
                }
                &:nth-child(1) {
                    a {
                        background: url(../assets/images/foot_enter_new.png) no-repeat;
                        background-size: 100px auto;
                        background-position: -54px -433px;
                    }
                }
            
                &:nth-child(2) {
                    a {
                        background: url(../assets/images/foot_enter_new.png) no-repeat;
                        background-size: 100px auto;
                        background-position: -55px -94px;
                    }
                }
            
                &:nth-child(3) {
                    a {
                        background: url(../assets/images/foot_enter_new.png) no-repeat;
                        background-size: 100px auto;
                        background-position: 2px 0px;
                    }
                }
            
                &:nth-child(4) {
                    a {
                        background: url(../assets/images/foot_enter_new.png) no-repeat;
                        background-size: 100px auto;
                        background-position: -55px -47px;
                    }
                }
            
                &:nth-child(5) {
                    a {
                        background: url(../assets/images/foot_enter_new.png) no-repeat;
                        background-size: 100px auto;
                        background-position: 2px -94px;
                    }
                }
                p{
                    font-size: 12px;
                }
            }
        }
    }
}
</style>